<template>
  <div @click="onPlayGame(props.item)" class="item_box" :class="[{
    'platform': [GameType.Live, GameType.Sports, GameType.Lottery].includes(props.item.venue_id),
  }, `box_size${props.size}`]">
    <div class="cover " :class="[`cover${props.type}`, `cover${props.size}`, { 'ready': isImgReady }]">
      <div class="game_hot" v-if="(props.item.is_hot === 1) && showHot">
        <iconpark-icon name="hot" size=".8rem"></iconpark-icon>
        <span>HOT</span>
      </div>
      <img style="width: 100%;height: 100%;" :data-ready="imgReady" src="@/assets/img-default.svg"
        v-thumb="joinURL(settings.backend_upload, (props.type == 2 ? props.item.gamePictureH5 : props.item.picture_h5))"
        :key="props.item.logo_h5"
        v-if="[GameType.Live, GameType.Sports, GameType.Lottery].includes(props.item.venue_id) && platformLogo">

      <img style="width: 100%;height: 100%;" v-else :data-ready="imgReady" v-thumb="joinURL(settings.backend_upload,
        (props.type == 2 ? props.item.gamePictureH5 : props.item.picture_h5))"
        :key="(props.type == 2 ? props.item.gamePictureH5 : props.item.picture_h5)">
      <!-- <div v-else :key="(props.type == 2 ? props.item.gamePictureH5 : props.item.picture_h5)" v-bgthumb="joinURL(settings.backend_upload,
        (props.type == 2 ? props.item.gamePictureH5 : props.item.picture_h5))" class="game_img" /> -->
    </div>
    <div class="title" :class="[props.type == 2 && 'title1', { 'ready': isImgReady }]">
      <div class="title_text">{{ unserialize(props.item.name, props.type == 2 ?
        true : false) }}</div>
    </div>
  </div>

  <!-- <div class="title" :class="props.type == 2 && 'title1'">
    {{ unserialize(props.item.name, props.type == 1 ? false : true) }}
  </div> -->
  <iconpark-icon v-if="isLocalLoggedIn" class="fav"
    :name="allCollected.includes(props.item.id) ? 'shoucang-sel' : 'shoucang-def'" size="1.25rem"
    @click.stop="reqCollect(props.item, allCollected)"></iconpark-icon>
  <div v-if="props.item.ismMintain === 1" class="masking_layer">
    <iconpark-icon class="maskin_img" name="padlock1" size="28" />
    <span>{{ t("inside_page_game_coming_soon") }}</span>
    <span>{{ t("inside_page_game_stay_tuned") }}</span>
  </div>
</template>

<script setup lang="ts" name="Img">
import { joinURL } from '@/utils/publicMethods'
import { useI18n } from "vue-i18n";
import { unserialize, onPlayGame } from "@/utils/useStoreMethods";
import { reqCollect } from "@/utils/useNetMethods";
import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
import { User } from "@/store/user";
import { isLocalLoggedIn } from "@/utils/commonVar";
import { GameType } from '@/enums/gameEnum.ts';
import pinia from "@/store";
import { ref } from "vue"
const { allCollected } = storeToRefs(User(pinia));
const { settings } = storeToRefs(Page(pinia));
const { t } = useI18n();

const emits: any = defineEmits(['ready'])
const props: any = defineProps({
  item: {
    type: Object,
    default: {},
  },
  type: {
    type: Number,
    default: 1,
  },
  size: {
    type: Number,
    default: 1,
  },
  showHot: {
    type: Boolean,
    default: true,
  },
  platformLogo: {
    type: Boolean,
    default: false,
  },
});

const isImgReady: any = ref(false)
const imgReady = () => {
  setTimeout(() => {
    emits('ready')
    isImgReady.value = true
  }, 0)
}
</script>
<style scoped lang="scss">
.masking_layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(1px);
  background: rgba(0, 0, 0, 0.6);
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #ffffff;

  .maskin_img {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }
}

.item_box {
  border-radius: 8px;
  background: #1a1944;
  position: relative;
  overflow: hidden;
  transition: all ease .2s;

  // height: 100%;
  &.platform {
    .cover {
      display: flex;
      justify-content: center;
      align-items: center;
      // background: rgba(38, 34, 98, 1) url(/imgs/category/bg_platform.png) no-repeat center;
      background-size: 100% 100%;

      .platform_img {
        width: 100%;
        height: 38px;
        background-size: auto 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
      }
    }
  }
}

.ready {
  opacity: 1!important;
}

.cover {
  width: 82px;
  height: 82px;
  position: relative;
  opacity: 0;

  .game_hot {
    // width: 38px;
    height: 15px;
    position: absolute;
    padding: 0 8px 0 4px;
    left: 0px;
    top: 0px;
    z-index: 9;
    background: url(/imgs/home/is_hot.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    .game_hot_icon {
      width: 8px;
      height: 10px;
      margin: 0 2px;
    }

    span {
      color: #ffffff;
      font-size: 8px;
      font-family: PingFang SC;
    }
  }

  .game_img {
    width: 100%;
    height: 100%;
    background-size: 110% auto !important;
    background-position: center -3px !important;
    background-repeat: no-repeat !important;
  }
}

.cover1 {
  width: 82px;
  height: 82px;
}

.box_size2 {
  .cover {
    width: 112px;
    height: 112px;
  }

  .title {
    height: 36px;
    font-size: 14px;
  }

  .title_text {
    line-height: 16px;
  }
}

.cover3 {
  width: 100%;
  height: 94px;
}

.fav {
  position: absolute;
  top: 5px;
  right: 5px;
}

.title {
  width: 100%;
  height: 28px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  padding: 1px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.title_text {
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 13px;
  text-overflow: ellipsis;
  flex: 1;
}

.title1 {
  height: 36px;
}
</style>
